<template>
    <div class="onoff_box" @click="active">
        <div class="onoff  inline-block ver-mid" :class="{box_active:n_data.state}" >
            <div :class="{active:n_data.state}" class="slide"></div>
        </div>
        <transition name="text_ran" mode="out-in">
            <div class="text inline-block ver-mid" v-if="n_data.state">{{n_data.onText}}</div>
            <div class="text inline-block ver-mid" v-else>{{n_data.offText}}</div>
        </transition>
        
    </div>
    
</template>
<script>
import { ref,watch } from 'vue'
export default {
    name:'g-onoff',
    props:{
        data:{
            type:Object,
            default:{
                onText:'开',
                offText:'关',
                state:false,
                fun:function(state){
                    console.log(state);
                }
            }
        }
    },
    setup(props) {
        let n_data=ref(props.data);

        watch(()=>props.data,(val)=>{
            n_data.value = val;
        })

        let active = ()=>{
            n_data.value.state = !n_data.value.state;
            n_data.value.fun(n_data.value.state);
        }
        return {
            // 变量
            n_data,
            // 方法
            active
        }
    }
}
</script>
<style scoped>
    .onoff_box{
        width: 75px;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }
    .onoff{
        width: 30px;
        height: 13px;
        background-color: #d9d9d9;
        /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
        border-radius: 20px;
        position: relative;
        transition: all .3s;
        margin-right: 10px;
        padding: 3px;
    }
    .slide{
        position: absolute;
        height: 13px;
        width: 13px;
        left: 3px;
        border-radius: 15px;
        background-color: #ffffff;
        transition: all .3s;
    }
    .text{
        font-size: 12px;
    }
    
    .active{
        left: 20px;
    }
    .box_active{
        background-color: #409EFF;
    }

    .text_ran-enter-active,
    .text_ran-leave-active{
        transition: all .3s;
    }
    .text_ran-enter-from,
    .text_ran-leave-to{
        transform: translateX(30px);
        opacity: 0;
    }
</style>